<template>
	<view class="profile-page">
		<!-- 用户信息区域 -->
		<view class="user-section">
			<view class="user-info" v-if="userInfo">
				<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" @click="editAvatar"></image>
				<view class="user-details">
					<text class="nickname">{{ userInfo.nickname || '用户' + userInfo.id }}</text>
					<text class="phone">{{ userInfo.phone || '未绑定手机号' }}</text>
				</view>
				<view class="edit-btn" @click="editProfile">
					<uni-icons type="compose" size="20" color="#999"></uni-icons>
				</view>
			</view>
			
			<view class="login-prompt" v-else @click="goLogin">
				<image class="default-avatar" src="/static/default-avatar.png"></image>
				<text class="login-text">点击登录</text>
			</view>
			
			<!-- 会员等级 -->
			<view class="member-level" v-if="userInfo">
				<view class="level-info">
					<text class="level-name">{{ memberLevel.name }}</text>
					<text class="level-desc">{{ memberLevel.desc }}</text>
				</view>
				<view class="level-progress">
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: memberLevel.progress + '%' }"></view>
					</view>
					<text class="progress-text">{{ memberLevel.current }}/{{ memberLevel.target }}</text>
				</view>
			</view>
		</view>
		
		<!-- 钱包信息 -->
		<view class="wallet-section" v-if="userInfo">
			<view class="wallet-item" @click="goWallet('balance')">
				<text class="wallet-amount">{{ walletInfo.balance }}</text>
				<text class="wallet-label">余额</text>
			</view>
			<view class="wallet-item" @click="goWallet('points')">
				<text class="wallet-amount">{{ walletInfo.points }}</text>
				<text class="wallet-label">积分</text>
			</view>
			<view class="wallet-item" @click="goWallet('coupons')">
				<text class="wallet-amount">{{ walletInfo.coupons }}</text>
				<text class="wallet-label">优惠券</text>
			</view>
		</view>
		
		<!-- 订单管理 -->
		<view class="order-section" v-if="userInfo">
			<view class="section-header" @click="goOrderList()">
				<text class="section-title">我的订单</text>
				<view class="header-right">
					<text class="view-all">查看全部</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<view class="order-types">
				<view class="order-type" v-for="(type, index) in orderTypes" :key="index" @click="goOrderList(type.status)">
					<view class="type-icon">
						<uni-icons :type="type.icon" size="24" color="#666"></uni-icons>
						<view class="badge" v-if="type.count > 0">
							<text class="badge-text">{{ type.count > 99 ? '99+' : type.count }}</text>
						</view>
					</view>
					<text class="type-name">{{ type.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group" v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
				<view class="menu-item" v-for="(item, itemIndex) in group" :key="itemIndex" @click="handleMenuClick(item)">
					<view class="menu-left">
						<uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
						<text class="menu-title">{{ item.title }}</text>
					</view>
					<view class="menu-right">
						<text class="menu-desc" v-if="item.desc">{{ item.desc }}</text>
						<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="logout-section" v-if="userInfo">
			<view class="logout-btn" @click="logout">
				<text class="logout-text">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js'
import { isLoggedIn, getCurrentUser, goToLogin, clearLoginInfo } from '@/api/auth.js'

export default {
	data() {
		return {
			userInfo: null,
			walletInfo: {
				balance: '0.00',
				points: 0,
				coupons: 0
			},
			memberLevel: {
				name: '普通会员',
				desc: '继续消费升级会员等级',
				progress: 30,
				current: 300,
				target: 1000
			},
			orderTypes: [
				{ name: '待付款', icon: 'wallet', status: 'pending', count: 0 },
				{ name: '待发货', icon: 'shop', status: 'paid', count: 0 },
				{ name: '待收货', icon: 'car', status: 'shipped', count: 0 },
				{ name: '待评价', icon: 'chat', status: 'completed', count: 0 }
			],
			menuGroups: [
				[
					{ title: '收货地址', icon: 'location', action: 'address' },
					{ title: '我的收藏', icon: 'heart', action: 'favorites' },
					{ title: '浏览历史', icon: 'eye', action: 'history' }
				],
				[
					{ title: '客服中心', icon: 'headphones', action: 'service' },
					{ title: '意见反馈', icon: 'chatbubble', action: 'feedback' },
					{ title: '关于我们', icon: 'info', action: 'about' }
				],
				[
					{ title: '设置', icon: 'gear', action: 'settings' }
				]
			]
		}
	},
	
	onLoad() {
		this.checkLoginStatus()
	},
	
	onShow() {
		// 页面显示时检查登录状态
		this.checkLoginStatus()
	},
	
	onPullDownRefresh() {
		this.loadUserData()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	
	methods: {
		// 检查登录状态
		checkLoginStatus() {
			if (isLoggedIn()) {
				this.loadUserData()
			} else {
				this.userInfo = null
			}
		},
		
		// 加载用户数据
		async loadUserData() {
			try {
				// 加载用户信息
				const userRes = await api.userApi.getUserInfo()
				if (userRes.code === 200) {
					this.userInfo = userRes.data
				}
				
				// 加载钱包信息
				const walletRes = await api.walletApi.getWalletInfo()
				if (walletRes.code === 200) {
					this.walletInfo = walletRes.data
				}
				
				// 加载订单统计
				const orderRes = await api.orderApi.getOrderStats()
				if (orderRes.code === 200) {
					const stats = orderRes.data
					this.orderTypes.forEach(type => {
						type.count = stats[type.status] || 0
					})
				}
				
				// 加载会员信息
				const memberRes = await api.userApi.getMemberInfo()
				if (memberRes.code === 200) {
					this.memberLevel = memberRes.data
				}
				
			} catch (error) {
				console.error('加载用户数据失败:', error)
			}
		},
		
		// 编辑头像
		editAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.uploadAvatar(res.tempFilePaths[0])
				}
			})
		},
		
		// 上传头像
		async uploadAvatar(filePath) {
			try {
				uni.showLoading({ title: '上传中...' })
				
				const res = await api.userApi.uploadAvatar(filePath)
				if (res.code === 200) {
					this.userInfo.avatar = res.data.avatar
					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message || '上传失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('上传头像失败:', error)
				uni.showToast({
					title: '网络错误',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 编辑个人资料
		editProfile() {
			uni.navigateTo({
				url: '/pages/profile/edit'
			})
		},
		
		// 去登录
			goLogin() {
				goToLogin();
			},
		
		// 钱包相关
		goWallet(type) {
			uni.navigateTo({
				url: `/pages/wallet/index?type=${type}`
			})
		},
		
		// 订单列表
		goOrderList(status = '') {
			uni.navigateTo({
				url: `/pages/order/list${status ? '?status=' + status : ''}`
			})
		},
		
		// 处理菜单点击
		handleMenuClick(item) {
			switch (item.action) {
				case 'address':
					uni.navigateTo({
						url: '/pages/address/index'
					})
					break
				case 'favorites':
					uni.navigateTo({
						url: '/pages/favorites/index'
					})
					break
				case 'history':
					uni.navigateTo({
						url: '/pages/history/index'
					})
					break
				case 'service':
					uni.navigateTo({
						url: '/pages/service/index'
					})
					break
				case 'feedback':
					uni.navigateTo({
						url: '/pages/feedback/index'
					})
					break
				case 'about':
					uni.navigateTo({
						url: '/pages/about/index'
					})
					break
				case 'settings':
					uni.navigateTo({
						url: '/pages/settings/index'
					})
					break
				default:
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					})
			}
		},
		
		// 退出登录
		logout() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储
						clearLoginInfo()
						
						// 重置数据
						this.userInfo = null
						this.walletInfo = {
							balance: '0.00',
							points: 0,
							coupons: 0
						}
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.profile-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.user-section {
	background: linear-gradient(135deg, #ff6b35, #f7931e);
	padding: 40rpx 30rpx 30rpx;
	color: #fff;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.nickname {
	font-size: 36rpx;
	font-weight: 600;
}

.phone {
	font-size: 26rpx;
	opacity: 0.8;
}

.edit-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}

.login-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
	padding: 40rpx 0;
}

.default-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	opacity: 0.8;
}

.login-text {
	font-size: 32rpx;
	font-weight: 600;
}

.member-level {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 16rpx;
	padding: 20rpx;
}

.level-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.level-name {
	font-size: 28rpx;
	font-weight: 600;
}

.level-desc {
	font-size: 24rpx;
	opacity: 0.8;
}

.level-progress {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.progress-bar {
	flex: 1;
	height: 8rpx;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 4rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background-color: #fff;
	border-radius: 4rpx;
	transition: width 0.3s ease;
}

.progress-text {
	font-size: 22rpx;
	opacity: 0.8;
}

.wallet-section {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.wallet-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.wallet-amount {
	font-size: 32rpx;
	font-weight: 600;
	color: #ff6b35;
}

.wallet-label {
	font-size: 24rpx;
	color: #666;
}

.order-section {
	background-color: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.view-all {
	font-size: 26rpx;
	color: #999;
}

.order-types {
	display: flex;
	justify-content: space-around;
}

.order-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16rpx;
}

.type-icon {
	position: relative;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
	border-radius: 50%;
}

.badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	min-width: 32rpx;
	height: 32rpx;
	background-color: #ff4757;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
}

.badge-text {
	font-size: 20rpx;
	color: #fff;
	line-height: 1;
}

.type-name {
	font-size: 24rpx;
	color: #666;
}

.menu-section {
	padding: 0 20rpx;
}

.menu-group {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.menu-title {
	font-size: 28rpx;
	color: #333;
}

.menu-right {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.menu-desc {
	font-size: 24rpx;
	color: #999;
}

.logout-section {
	padding: 20rpx;
}

.logout-btn {
	background-color: #fff;
	border-radius: 16rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.logout-text {
	font-size: 28rpx;
	color: #ff4757;
	font-weight: 600;
}
</style>